<template>
	<div class="testcase">
	  <div class="manage">
	    <el-dialog
	      :title="operateType === 'add' ? '新增用例' : '更新用例'"
	      :visible.sync="isShow"
	    >
	      <el-form label-width="100px">
			  <el-form-item label="用例名称" prop="cname">
			    <el-input v-model="cname" placeholder="请输入用例名称"></el-input>
			  </el-form-item>
	        <el-form-item label="请求方式" prop="method">
	          <el-select v-model="method" placeholder="请选择请求方式">
	            <el-option label="post" value="post"></el-option>
	            <el-option label="get" value="get"></el-option>
	          </el-select>
	        </el-form-item>
	        <el-form-item label="数据类型" prop="type">
	          <el-select v-model="type" placeholder="请选择数据类型">
	            <el-option label="json" value="json"></el-option>
	            <el-option label="param" value="param"></el-option>
	          </el-select>
	        </el-form-item>
	        <el-form-item label="接口" prop="port">
	          <el-input v-model="port" placeholder="请输入接口"></el-input>
	        </el-form-item>
	        <el-form-item label="请求数据" prop="data">
	          <el-input v-model="data" placeholder="请输入请求数据"></el-input>
	        </el-form-item>
	        <el-form-item label="  " prop="btn">
	          <el-button @click="isShow = false" icon="el-icon-close">取消</el-button>
	          <el-button type="success" icon="el-icon-check" @click="submit">确定</el-button>
	      </el-form-item>
	      </el-form>
	    </el-dialog>
	  </div>
	  <div class="header">
	    <el-input  @change="get"  v-model="input"  placeholder="请输入内容"
	    ></el-input>
	    <el-button type="info" icon="el-icon-search">查询</el-button>
	    <el-button type="primary" @click="addCases" icon="el-icon-plus">添加</el-button>
	  </div>
	  <div class="wrapper">
	    <el-table  :data="tableData.slice((cur-1)*pageSize, cur*pageSize)"  style="width: 100%"  :default-sort="{ prop: 'date', order: 'descending' }">
	      <el-table-column prop="cname" label="用例名称" sortable min-width="10%">
	      </el-table-column>
	      <el-table-column prop="method" label="请求方式" sortable min-width="10%">
	      </el-table-column>
	      <el-table-column prop="type" label="数据类型" sortable min-width="10%">
	      </el-table-column>
	      <el-table-column prop="port" label="接口" sortable min-width="23%">
	      </el-table-column>
	      <el-table-column prop="data" label="请求数据" sortable min-width="23%">
	      </el-table-column>
	      <el-table-column label="操作" min-width="24%">
	        <template slot-scope="scope">
	          <el-button size="mini" type="primary" icon="el-icon-edit" @click="handleEdit(scope.row)">编辑</el-button>
	          <el-button size="mini" type="danger" icon="el-icon-delete" @click="del(scope.row)">删除</el-button>
	        </template>
	      </el-table-column>
	    </el-table>
	  </div>
	  <div style="text-align:center;margin:20px">
	    <el-pagination background layout="prev, pager, next" @current-change="current_change"
	      :total="tableData.length" :page-size="pageSize">
	    </el-pagination>
	</div>
	</div>
</template>

<script lang="ts">
import axios from "axios";

export default {
  inject: ["reload"],
  name: "testcase",
  components: {
  },
  data() {
    return {
	  cname:'',
      method: '',
      type: '',
      port:'',
      data: '',
      id:'',
      operateType: "add",
      isShow: false,
      input: "",
      tableData: [],
      cur:1,//当前页
      total:0,//总页数
      pageSize: 8,//每页展示的内容
    };
  },
  //生命周期函数
  created() {
    this.$api.getCaseList().then((res) => {
      this.tableData = res.data;
    });
  },
  methods: {
    current_change(newPage){
      this.cur = newPage
    },
    createId(){//生成随机id
      var code= '';
      var codeLength = 4;
      var random = new Array(0,1,2,3,4,5,6,7,8,9);
      for(var i = 0; i <codeLength; i++){
        var index = Math.floor(Math.random()*9)
        code += random[index]
      }
      return code
    },
    handleEdit(row) {
      this.operateType = "edit";
      this.isShow = true;
      this.id = row.id;
	  this.cname = row.cname;
      this.method = row.method;
      this.type = row.type;
      this.port = row.port;
      this.data = row.data
    },
    get(val) {//查询操作
      axios
        .get("http://localhost:9999/clist/get", {
          params: {
            cname: val,
          },
        })
        .then((res) => {
          this.tableData = res.data;
        })
        .catch((err) => {
          console.log('获取数据失败');
        });
    },
    submit() {
      if (this.operateType === "add") {//添加用例
        axios.get('http://localhost:9999/clist/add', {
            params: {
              id:this.createId(),
			  cname:this.cname,
              method:this.method,
              type:this.type,
              port:this.port,
              data:this.data
            }
          }).then((res) => {
            this.reload();
            this.isShow = false
          }).catch((err) => {
            console.log("数据获取失败" + err);
          });
      }else {//编辑用例
        axios.get('http://localhost:9999/clist/update',{
          params:{
            id: this.id,
			cname:this.cname,
            method: this.method,
            type: this.type,
            port: this.port,
            data: this.data,
          }
        }).then(res=>{
          this.isShow = false
          this.reload()
        }).catch(err=>{
          console.log('数据获取失败' +err)
        })
      }
    },
    addCases() {//添加用例 打开表单
      this.isShow = true;
      this.operateType = "add";
	  this.cname = '',
      this.method = '',
      this.type = '',
      this.port = '',
      this.data = ''
    },
    del(row) {//删除用例
      this.$confirm("此操作将永久删除该信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          axios
            .get("http://localhost:9999/clist/del", {
              params: {
                cname: row.cname,
              },
            })
            .then((res) => {
              this.reload();
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            });
        })
        .catch((err) => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>
<style lang='less' scoped>
.testcase {
  margin: 20px;
  height: 592px;
}
.header {
  display: flex;
  button {
    margin-left: 20px;
  }
}
.wrapper {
  margin: 20px;
  button {
    margin: 5px;
  }
}
</style>